'use client'
import React, { useEffect, useState } from "react";
import { Button, Col, Form, Input, message, Modal, Radio, Row, Select, TreeSelect } from 'antd';
import styles from "./index.module.css";
import { addData, getData, updateData } from "@/clientApi/system/dict/data";
import { globalMessage } from "@/utils/message";


// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    dictCode?: string;
    dictType?:string;
}

const EditDictDataView: React.FC<MyComponentProps> = (props) => {

    const [form] = Form.useForm();
    // 表单的值
    const [formData, setFormData] = useState({})
    function handleCancel() {
        props.OnCanCle()
    }
    useEffect(() => {
        if (props.dictCode) {
            getDictData(props.dictCode)
        } else {
            form.setFieldsValue({
                dictType:props.dictType,
                dictLabel: '',
                dictValue: "",
                cssClass: "",
                dictSort: "",
                listClass: "",
                status: '0',
                remark: '',
            });
        }
    }, [props.dictCode]);
    const getDictData = (id?: string) => {

        getData(id).then((res: any) => {
            if (res?.code === 200) {
                setFormData(res.data)
                form.setFieldsValue({
                    dictType: res.data?.dictType || '',
                    dictLabel: res.data?.dictLabel || '',
                    dictValue: res.data?.dictValue || "",
                    cssClass: res.data?.cssClass || "",
                    dictSort: res.data?.dictSort || "",
                    listClass: res.data?.listClass || "",
                    status: res.data?.status || '0',
                    remark: res.data?.remark || '',
                });
            }
        });
    };
    const onValuesChange = (changedValues: any, allValues: any) => {
        if (props.dictCode !== undefined) {
            setFormData((prevState: any) => ({
                ...prevState, ...changedValues
            }));
        } else {
            setFormData((prevState: any) => ({
                ...allValues
            }));
        }
    };
    const handleSubmit = () => {
        if (props.dictCode !== undefined) {
            updateData(formData).then((res: any) => {
                globalMessage().warning(res.msg).then(r => { })
                props.OnCanCle()
            });
        } else {
            addData(formData).then((res: any) => {
                 globalMessage().warning(res.msg).then(r => { })
                props.OnCanCle()
            });
        }
    }
    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                onCancel={() => {
                    props.OnCanCle()
                }}
            >
                <Form form={form}
                    name="edituser"
                    style={{ maxWidth: 800 }}
                    onValuesChange={onValuesChange}>
                    <Row gutter={10}>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="字典类型"
                                name="dictType"
                                
                                rules={[{ required: true, message: "字典类型不能为空", validateTrigger: "blur" }]}
                            >
                                <Input disabled/>
                            </Form.Item>
                        </Col>

                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="数据标签"
                                name="dictLabel"
                                rules={[{ required: true, message: "数据标签不能为空", validateTrigger: "blur" }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="数据键值"
                                name="dictValue"
                                rules={[{ required: true, message: "数据键值不能为空", validateTrigger: "blur" }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="样式属性"
                                name="cssClass"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="显示排序"
                                name="dictSort"
                                rules={[{ required: true, message: "显示排序不能为空", validateTrigger: "blur" }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="回显样式"
                                name="listClass"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                labelCol={{ span: 8, }}
                                label="状态"
                                name="status">
                                <Radio.Group
                                >
                                    <Radio value={"0"}>正常</Radio>
                                    <Radio value={"1"}>停用</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                labelCol={{ span: 4, }}
                                label="备注"
                                name="remark"
                            >
                                <Input.TextArea />
                            </Form.Item>
                        </Col>

                        <Col span={24}>
                            <Form.Item
                                wrapperCol={{ offset: 16, span: 8 }}
                            >
                                <div className={styles.buttonClass}>
                                    <Button type="primary" htmlType="submit" onClick={handleSubmit}>确认</Button>
                                    <Button type="primary" onClick={handleCancel}>取消</Button>
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    )
};
export default EditDictDataView;
